<!--
 * @Description: 
 * @Author: wangqi
 * @Date: 2022-04-28 14:43:44
 * @LastEditTime: 2022-04-28 17:50:10
-->
<template>
  <div class="nested-routes">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane v-for="item in tabs" :key="item.value" :tab="item.label"></a-tab-pane>
    </a-tabs>

    <router-view #="{ Component }">
      <KeepAlive>
        <component :is="Component" />
      </KeepAlive>
    </router-view>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  defineOptions({
    name: 'NestedRoutes',
  });

  const route = useRoute();
  const router = useRouter();
  const tabs = [
    {
      label: '路由1',
      value: 'demos-nested-routes-one',
    },
    {
      label: '路由2',
      value: 'demos-nested-routes-two',
    },
  ];

  const activeKey = ref((route.name as string) || tabs[0]['label']);

  watch(activeKey, (newVal) => {
    console.log(newVal, 'newVal');

    router.push({ name: newVal });
  });
</script>
<style lang="less" scoped></style>
